<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2024-05-06 11:23:18
 * @LastEditors: icymoon911 icymoon911@163.com
 * @LastEditTime: 2024-07-18 14:23:48
 * @FilePath: \ken147258.topayClient\src\views\other\system\basic-setting.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div overflow-hidden class="app-container" v-loading="loading">
    <!-- <div class="search-container">
      <FormList :initForm="initSearchForm" v-model:formModel="searchForm"></FormList>
    </div> -->
    <el-card shadow="never" class="table-container">
      <!-- <template #header>
        <el-button type="success" @click="handleTableBtnClick({}, 'add')"
          ><i-ep-plus />添加</el-button
        >
        <el-button type="warning" @click="handleTableBtnClick({}, 'groud-send')"
          ><i-ep-promotion />一键群发</el-button
        >
        <el-button type="danger" @click="handleTableBtnClick({}, 'unbind-all')"
          ><i-ep-close-bold />一键解綁TG</el-button
        >
      </template> -->
      <div
        class="info-container border-[#e6e6e6] border-solid border p-[10px] border-l-[5px] mb-[10px]"
      >
        备注：如给码商的汇率是百分之5，则输入框信息填入 5
        <el-button
          float-right
          mt--3px
          size="small"
          type="primary"
          @click="handleSetCheckedRate"
        >
          一键设置所选费率
        </el-button>
        <!-- <el-button
          float-right
          mt--3px
          mr-5px
          size="small"
          type="primary"
          @click="handleLastSetRate"
        >
          获取最后修改的费率
        </el-button> -->
      </div>
      <comTable
        ref="multipleTableRef"
        :data="tableDatasCom"
        :config="tableconfig"
        :tableHeader="tableHeader"
        v-loading="loading"
        row-key="id"
        @link-click="handleTableBtnClick"
        @selection-change="handleTableSelectionChange"
      >
        <template #rate="{ row, index }">
          <el-input-number
            v-model="row.rate"
            :precision="2"
            :step="0.1"
            :min="0"
            :max="100"
            @input="(currentValue) => handleRateChange(currentValue, row, index, 'rate')"
          ></el-input-number>
        </template>
        <template #min_amount="{ row, index }">
          <el-input-number
            v-model="row.min_amount"
            :min="0"
            @input="
              (currentValue) => handleRateChange(currentValue, row, index, 'min_amount')
            "
          ></el-input-number>
        </template>
        <template #max_amount="{ row, index }">
          <el-input-number
            :min="0"
            v-model="row.max_amount"
            @input="
              (currentValue) => handleRateChange(currentValue, row, index, 'max_amount')
            "
          ></el-input-number>
        </template>
        <template #status="{ row, index }">
          <el-switch
            v-model="row.statusCom"
            inline-prompt
            active-text="启用"
            inactive-text="禁用"
            @change="(val) => handleStatusChange(val, row, index)"
          />
        </template>
      </comTable>
      <!-- 
      <pagination
        v-if="tableDatasObj.paging.total > 0"
        v-model:total="tableDatasObj.paging.total"
        v-model:page="tableDatasObj.paging.page"
        v-model:limit="tableDatasObj.paging.limit"
        @pagination="handleQuery"
      /> -->
    </el-card>
    <!-- 弹窗 -->
    <!-- <el-dialog
      v-model="dialog.visible"
      :title="dialog.title"
      :width="dialog.width"
      append-to-body
      @close="closeDialog"
      @closed="closedDialog"
    >
      <FormList
        v-if="initDialogForm.initKeys.length"
        v-model:formRef="formDialogId"
        v-model:formModel="formDialogModel"
        :initForm="initDialogForm"
      ></FormList>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleLeftClick">{{
            dialog.leftBtnText
          }}</el-button>
          <el-button @click="handleRightClick">{{ dialog.rightBtnText }}</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-model="dialogForPayOnOff.visible"
      :title="dialogForPayOnOff.title"
      :width="dialogForPayOnOff.width"
      append-to-body
      @close="closeDialog"
      @closed="closedDialog"
    >
      <ChannelsChange
        v-if="dialogForPayOnOff.visible"
        :id="dialogForPayOnOff.id"
        :type="dialogForPayOnOff.type"
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogForPayOnOff.handleRightClick">{{
            dialogForPayOnOff.rightBtnText
          }}</el-button>
        </div>
      </template>
    </el-dialog> -->
  </div>
</template>

<script setup lang="ts">
import { inject } from "vue";
import { ElInputNumber, FormInstance } from "element-plus";
import FormList from "@/components/FormList/index.vue";
import comTable from "@/components/comTable/comTable.vue";
import {
  pro_order_list as list,
  pro_order_modify as edit,
  ms_pro_modify,
  getLastPayProductRate,
  presetsRate,
} from "@/api/other/ms";
import { cloneDeep } from "lodash";

const getFormatDate = inject("getFormatDate");

const props = defineProps({
  datas: {
    required: true,
  },
});

const options = {
  status: [
    { value: "1", label: "启用" },
    { value: "2", label: "禁用" },
  ],
};

const searchForm = ref({});
const initSearchForm = ref({
  // 表单标签位置
  // labelPosition: "right",
  formAttrs: {
    // 是否内联
    inline: true,
  },
  rowAttrs: {
    // 行内表单数量
    columnsNum: 4,
  },
  // 初始化表单字段
  initKeys: [
    {
      // 类型
      type: "input",
      // 唯一标识
      key: "order_id",
      // 表单属性
      formAttrs: {
        label: "代付订单ID",
        labelWidth: "100px",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请输入代付订单ID",
        // 是否可清空
        clearable: true,
      },
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "input",
      // 唯一标识
      key: "action",
      // 表单属性
      formAttrs: {
        label: "操作动作名称",
        labelWidth: "100px",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请输入操作动作名称",
        // 是否可清空
        clearable: true,
      },
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "input",
      // 唯一标识
      key: "msg",
      // 表单属性
      formAttrs: {
        label: "说明",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请输入说明",
        // 是否可清空
        clearable: true,
      },
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "input",
      // 唯一标识
      key: "ip",
      // 表单属性
      formAttrs: {
        label: "ip",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请输入ip",
        // 是否可清空
        clearable: true,
      },
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "select",
      // 唯一标识
      key: "platform",
      // 表单属性
      formAttrs: {
        label: "平台",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请输入平台",
        // 是否可清空
        clearable: true,
      },
      options: options.platform,
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "input",
      // 唯一标识
      key: "platform_user_id",
      // 表单属性
      formAttrs: {
        label: "平台用户id",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请输入平台用户id",
        // 是否可清空
        clearable: true,
      },
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "date-picker",
      // 唯一标识
      key: "start_time",
      // 表单属性
      formAttrs: {
        label: "开始时间",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请选择开始时间",
        // 是否可清空
        clearable: true,
        style: {
          width: "100%",
        },
      },
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "date-picker",
      // 唯一标识
      key: "end_time",
      // 表单属性
      formAttrs: {
        label: "结束时间",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请选择结束时间",
        // 是否可清空
        clearable: true,
        style: {
          width: "100%",
        },
      },
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "buttons",
      // 按钮
      btns: [
        {
          // 文本
          text: "搜索",
          // 控制属性
          controlAttrs: {
            // 类型
            type: "primary",
            icon: "search",
          },
          // 控制事件
          controlOn: {
            // 点击
            click: (e: Event, formRef: FormInstance, data: Array<object>) => {
              formRef.validate((valid) => {
                if (valid) {
                  console.log("fields", data);
                  tableDatasObj.value.paging.page = 1;

                  let tempData = { ...data };

                  if (data.start_time) {
                    tempData.start_time = data.start_time.getTime() / 1000;
                  }
                  if (data.end_time) {
                    tempData.end_time = data.end_time.getTime() / 1000;
                  }

                  tableDatasObj.value.queryParams = tempData;

                  handleQuery(tableDatasObj.value.paging);
                }
              });
            },
          },
        },
        {
          // 文本
          text: "重置",
          // 控制属性
          controlAttrs: {
            icon: "refresh",
          },
          // 控制事件
          controlOn: {
            // 点击
            click: resetQuery,
          },
        },
      ],
    },
  ],
});

/** 重置查询 */
function resetQuery(e: Event, formRef: FormInstance, data: Array<object>) {
  // 重置表单
  formRef.resetFields();
  // 查询
  tableDatasObj.value.paging.page = 1;
  tableDatasObj.value.paging.limit = 20;
  tableDatasObj.value.queryParams = { ...searchForm.value };
  const params = {
    ...tableDatasObj.value.queryParams,
    ...data,
    ...tableDatasObj.value.paging,
  };

  handleQuery(params);
}

// 表*********************************************
const loading = ref(false);

const tableDatasObj = ref({
  list: [],
  paging: {
    limit: 9999,
    page: 1,
    total: 0,
  },
});
const tableDatasCom = computed(() => {
  return tableDatasObj.value.list.map((item) => {
    return {
      ...item,
      // typeCom: options.status.find((tItem) => tItem.value === item.type.toString())
      //   ?.label,
      // before_statusCom: options.status.find(
      //   (tItem) => tItem.value === item.before_status.toString()
      // )?.label,
      // after_statusCom: options.status.find(
      //   (tItem) => tItem.value === item.after_status.toString()
      // )?.label,
      // change_timeCom: getFormatDate(item.change_time),
      pro_nameCom: `${item.pro_name}`,
      statusCom: (item.status || "").toString() === "1",
      rate: Number(item.rate),
    };
  });
});

const multipleTableRef = ref<InstanceType<typeof ElTable>>();

const tableconfig = {
  // tableHeight: 480, //表格高度
  isSelection: true, //显示复选框
  isRowClick: false, //使用行点击
  isStripe: true, //隐藏斑马纹，与背景色不可同时用
  isShowSummary: false, //显示共计
  isIndex: true, //自定义序号
  isNeedPagination: true, //是否需要分页
};
const tableHeader = [
  // { label: "码商ID", prop: "ms_id", width: 100 },
  // { label: "产品ID", prop: "pro_id", width: 140 },
  { label: "产品名称", prop: "pro_nameCom" },
  { label: "通道代码", prop: "pass_code", width: 200 },
  // { label: "最小接单金额", prop: "min_amount", width: 150, type: "slot" },
  // { label: "最大接单金额", prop: "max_amount", width: 150, type: "slot" },
  { label: "费率（%）", prop: "rate", width: 220, type: "slot" },
  // { label: "状态", prop: "status", width: 180, type: "slot" },
  // {
  //   label: "操作",
  //   isSort: false,
  //   prop: "operation",
  //   columnAttrs: {
  //     fixed: "right",
  //     width: "100",
  //   },
  //   children: [
  //     {
  //       type: "button",
  //       btnText: "确认修改",
  //       title: "confirm",
  //       controlAttrsFunc(obj) {
  //         let result = {};

  //         if (obj.confirmEdit) {
  //           result.disabled = false;
  //         } else {
  //           if (!result.style) {
  //             result.style = {};
  //           }
  //           result.style.display = "none";
  //         }

  //         return result;
  //       },
  //     },
  //     // {
  //     //   type: "button",
  //     //   btnText: "支付开关",
  //     //   title: "pay-on-off",
  //     // },
  //     // {
  //     //   type: "button",
  //     //   btnText: "费率",
  //     //   title: "rate",
  //     // },
  //     // {
  //     //   type: "button",
  //     //   btnText: "代收费率",
  //     //   title: "agency-rate",
  //     // },
  //     // // {
  //     // //   type: "button",
  //     // //   btnText: "TG",
  //     // //   title: "tg",
  //     // // },
  //     // // {
  //     // //   type: "button",
  //     // //   btnText: "解绑TG",
  //     // //   title: "unbind-tg",
  //     // // },
  //     // {
  //     //   type: "button",
  //     //   btnText: "编辑",
  //     //   title: "edit",
  //     // },
  //     // {
  //     //   type: "button",
  //     //   btnText: "删除",
  //     //   title: "del",
  //     // },
  //   ],
  // },
];

const selectTableRows = ref([]);
function handleTableSelectionChange(selectRows) {
  selectTableRows.value = selectRows;
}

import { usePayProductStore } from "@/store";
/**
 * 查询
 */
async function handleQuery(paging: { page: number; limit: number }) {
  loading.value = true;

  const proLists = await usePayProductStore().loadPayProducts();

  tableDatasObj.value.list = proLists.map((item) => {
    return {
      ...item,
      rate: "0.00",
    };
  });

  setTimeout(() => {
    handleLastSetRate();
  }, 500);

  loading.value = false;
}
// 完*********************************************

// const initDialogForm = ref({
//   // 表单标签位置
//   formAttrs: {
//     // 是否内联
//     // inline: true,
//     labelPosition: "top",
//   },
//   rowAttrs: {
//     // 行内表单数量
//     columnsNum: 2,
//   },
//   // 初始化表单字段
//   initKeys: <any>[],
// });

// let initDialogFormBak = cloneDeep(initDialogForm.value);

// const isHasOptions = [
//   {
//     // 标签
//     label: "关闭",
//     // 值
//     value: 0,
//   },
//   {
//     // 标签
//     label: "开启",
//     // 值
//     value: 1,
//   },
// ];

// const switchFieldArr = [
//   "allow_df",
//   "status",
//   "is_check",
//   "hide_withdrawa",
//   "audit_withdrawal_user",
//   "allow_fore_launch_df",
//   "google_check",
//   "support_back",
// ];
// const switchFieldHandle = {
//   getDisplay(field: any) {
//     return (field || "").toString() === "1";
//   },
//   getField(field: Boolean) {
//     return field ? "1" : "2";
//   },
// };

function handleTableBtnClick(row: object, title: string) {
  // dialog.type = title;
  // dialog.singleData = tableDatasObj.value.list.find((item) => item.id === row.id);
  const singleData = tableDatasObj.value.list.find((item) => item.id === row.id);

  if (title === "confirm") {
    edit({
      ...singleData,
      ids: singleData.id,
    }).then(() => {
      ElMessage.success("修改成功");

      handleQuery();

      // tableDatasObj.value.list[tableDatasObj.value.list.findIndex((item) => item.id === row.id)].confirmEdit = false;
    });
  }
  // if (title === "add") {
  //   dialog.visible = true;
  //   dialog.title = "添加用户";
  //   dialog.leftBtnText = "确 定";
  //   dialog.rightBtnText = "取 消";

  //   initDialogForm.value.initKeys = [
  //     {
  //       // 类型
  //       type: "input",
  //       // 唯一标识
  //       key: "mer_name",
  //       // 表单属性
  //       formAttrs: {
  //         label: "商户户名",
  //       },
  //       // 控制属性
  //       controlAttrs: {
  //         // 提示文本
  //         placeholder: "请输入商户户名",
  //         // 是否可清空
  //         clearable: true,
  //       },
  //       // 控制事件
  //       controlOn: {},
  //     },
  //     {
  //       // 类型
  //       type: "input",
  //       // 唯一标识
  //       key: "nick_name",
  //       // 表单属性
  //       formAttrs: {
  //         label: "昵称",
  //       },
  //       // 控制属性
  //       controlAttrs: {
  //         // 提示文本
  //         placeholder: "请输入昵称",
  //         // 是否可清空
  //         clearable: true,
  //       },
  //       // 控制事件
  //       controlOn: {},
  //     },
  //     {
  //       // 类型
  //       type: "input",
  //       // 唯一标识
  //       key: "password",
  //       // 表单属性
  //       formAttrs: {
  //         label: "密码",
  //       },
  //       // 控制属性
  //       controlAttrs: {
  //         // 提示文本
  //         placeholder: "请输入密码（6-12位）",
  //         // 是否可清空
  //         clearable: true,
  //         maxlength: 12,
  //       },
  //       // 控制事件
  //       controlOn: {},
  //     },
  //     {
  //       // 类型
  //       type: "input",
  //       // 唯一标识
  //       key: "confirm_password",
  //       // 表单属性
  //       formAttrs: {
  //         label: "确认密码",
  //       },
  //       // 控制属性
  //       controlAttrs: {
  //         // 提示文本
  //         placeholder: "请输入确认密码（6-12位）",
  //         // 是否可清空
  //         clearable: true,
  //         maxlength: 12,
  //       },
  //       // 控制事件
  //       controlOn: {},
  //     },
  //     // {
  //     //   // 类型
  //     //   type: "input",
  //     //   // 唯一标识
  //     //   key: "type",
  //     //   // 表单属性
  //     //   formAttrs: {
  //     //     label: "商户类型",
  //     //   },
  //     //   // 控制属性
  //     //   controlAttrs: {
  //     //     // 提示文本
  //     //     placeholder: "请选择商户类型",
  //     //     // 是否可清空
  //     //     clearable: true,
  //     //   },
  //     //   // 选项
  //     //   options: [
  //     //     {
  //     //       label: "普通商户",
  //     //       value: 1,
  //     //     },
  //     //     {
  //     //       label: "代理商户",
  //     //       value: 2,
  //     //     },
  //     //   ],
  //     //   // 控制事件
  //     //   controlOn: {},
  //     // },
  //   ];
  // } else if (title === "reset") {
  //   dialog.visible = false;

  //   ElMessageBox.confirm("确认重置商户密钥码？", "信息", {
  //     type: "warning",
  //   }).then(() => {
  //     secret_key_reset({ id: dialog.singleData.id }).then(() => {
  //       ElMessage.success("重置成功");
  //       closedDialog();
  //       handleQuery();
  //     });
  //   });
  // } else if (title === "groud-send") {
  // } else if (title === "unbind-all") {
  //   ElMessageBox.confirm("确认一键解绑所有商户TG？", "信息", {
  //     confirmButtonText: "确定",
  //     cancelButtonText: "取消",
  //     type: "warning",
  //   }).then(() => {
  //     // 访问接口；刷新列表
  //   });
  // } else if (title === "key") {
  //   // 新增支付产品
  //   dialog.title = "敏感操作，请验证安全码";
  //   dialog.leftBtnText = "确 定";
  //   dialog.rightBtnText = "取 消";

  //   initDialogForm.value.initKeys.push(
  //     ...[
  //       // 产品名称
  //       // 通道代码
  //       // 通道显示
  //       // 状态
  //       {
  //         // 类型
  //         type: "input",
  //         // 唯一标识
  //         key: "qqq5",
  //         // 表单属性
  //         formAttrs: {
  //           label: "产品名称",
  //         },
  //         // 控制属性
  //         controlAttrs: {
  //           // 提示文本
  //           placeholder: "请输入产品名称",
  //           // 是否可清空
  //           clearable: true,
  //         },
  //         // 控制事件
  //         controlOn: {},
  //       },
  //       {
  //         // 类型
  //         type: "input",
  //         // 唯一标识
  //         key: "qqq5",
  //         // 表单属性
  //         formAttrs: {
  //           label: "通道代码",
  //         },
  //         // 控制属性
  //         controlAttrs: {
  //           // 提示文本
  //           placeholder: "请输入通道代码",
  //           // 是否可清空
  //           clearable: true,
  //         },
  //         // 控制事件
  //         controlOn: {},
  //       },
  //       {
  //         // 类型
  //         type: "switch",
  //         // 唯一标识
  //         key: "qqq5",
  //         // 表单属性
  //         formAttrs: {
  //           label: "通道显示",
  //         },
  //         // 控制属性
  //         controlAttrs: {
  //           value: false,
  //         },
  //         // 控制事件
  //         controlOn: {},
  //       },
  //       {
  //         // 类型
  //         type: "switch",
  //         // 唯一标识
  //         key: "qqq5",
  //         // 表单属性
  //         formAttrs: {
  //           label: "状态",
  //         },
  //         // 控制属性
  //         controlAttrs: {
  //           value: false,
  //         },
  //         // 控制事件
  //         controlOn: {},
  //       },
  //     ]
  //   );
  // } else if (title === "pay-on-off") {
  //   // 渠道配置
  //   dialog.visible = false;

  //   dialogForPayOnOff.visible = true;
  //   dialogForPayOnOff.type = "status";
  //   dialogForPayOnOff.id = row.id;
  //   dialogForPayOnOff.title = "商户支付产品";
  //   dialogForPayOnOff.leftBtnText = "确 定";
  //   dialogForPayOnOff.rightBtnText = "取 消";
  // } else if (title === "rate") {
  //   // 调整费率
  //   dialog.visible = false;

  //   dialogForPayOnOff.visible = true;
  //   dialogForPayOnOff.type = "rate";
  //   dialogForPayOnOff.id = row.id;
  //   dialogForPayOnOff.title = "商户支付渠道";
  //   dialogForPayOnOff.leftBtnText = "确 定";
  //   dialogForPayOnOff.rightBtnText = "取 消";
  // } else if (title === "agency-rate") {
  //   // 设置费率
  //   dialog.visible = true;
  //   dialog.title = "调整码商费率（统一按照百分比计算）";
  //   dialog.leftBtnText = "确 定";
  //   dialog.rightBtnText = "取 消";
  //   initDialogForm.value.initKeys.push(
  //     ...[
  //       {
  //         // 类型
  //         type: "input-number",
  //         // 唯一标识
  //         key: "df_one_fee",
  //         // 表单属性
  //         formAttrs: {
  //           label: "单笔手续费（元）",
  //         },
  //         // 控制属性
  //         controlAttrs: {
  //           // 提示文本
  //           placeholder: "请输入单笔手续费（元）",
  //           // 是否可清空
  //           clearable: true,
  //           min: 0,
  //           style: {
  //             width: "100%",
  //           },
  //           value: dialog.singleData.df_one_fee,
  //         },
  //         appendTxt: "%",
  //         // 控制事件
  //         controlOn: {},
  //       },
  //       {
  //         // 类型
  //         type: "input-number",
  //         // 唯一标识
  //         key: "df_rate",
  //         // 表单属性
  //         formAttrs: {
  //           label: "费率（1代表1%）",
  //         },
  //         // 控制属性
  //         controlAttrs: {
  //           // 提示文本
  //           placeholder: "请输入费率（1代表1%）",
  //           // 是否可清空
  //           clearable: true,
  //           min: 0,
  //           max: 100,
  //           style: {
  //             width: "100%",
  //           },
  //           value: dialog.singleData.df_rate,
  //         },
  //         appendTxt: "%",
  //         // 控制事件
  //         controlOn: {},
  //       },
  //     ]
  //   );
  // } else if (title === "tg") {
  //   // 设置费率
  //   dialog.title = "调整码商费率（统一按照百分比计算）";
  //   dialog.leftBtnText = "确 定";
  //   dialog.rightBtnText = "取 消";
  //   initDialogForm.value.initKeys.push(
  //     ...[
  //       {
  //         // 类型
  //         type: "input",
  //         // 唯一标识
  //         key: "rate",
  //         // 表单属性
  //         formAttrs: {
  //           label: "自定义引导语",
  //         },
  //         // 控制属性
  //         controlAttrs: {
  //           // 提示文本
  //           placeholder: "请输入需要设置的费率",
  //           // 是否可清空
  //           clearable: true,
  //         },
  //         appendTxt: "%",
  //         // 控制事件
  //         controlOn: {},
  //       },
  //     ]
  //   );
  // } else if (title === "unbind-tg") {
  //   // 设置费率
  //   dialog.title = "调整码商费率（统一按照百分比计算）";
  //   dialog.leftBtnText = "确 定";
  //   dialog.rightBtnText = "取 消";
  //   initDialogForm.value.initKeys.push(
  //     ...[
  //       {
  //         // 类型
  //         type: "input",
  //         // 唯一标识
  //         key: "rate",
  //         // 表单属性
  //         formAttrs: {
  //           label: "自定义引导语",
  //         },
  //         // 控制属性
  //         controlAttrs: {
  //           // 提示文本
  //           placeholder: "请输入需要设置的费率",
  //           // 是否可清空
  //           clearable: true,
  //         },
  //         appendTxt: "%",
  //         // 控制事件
  //         controlOn: {},
  //       },
  //     ]
  //   );
  // } else if (title === "edit") {
  //   // 设置费率
  //   const switchFieldObj = Object.fromEntries(
  //     switchFieldArr.map((field) => {
  //       return [[field], switchFieldHandle.getDisplay(dialog.singleData[field])];
  //     })
  //   );
  //   let switchData = (dialog.visible = true);
  //   dialog.title = "编辑商户";
  //   dialog.leftBtnText = "确 定";
  //   dialog.rightBtnText = "取 消";
  //   initDialogForm.value.initKeys.push(
  //     ...[
  //       {
  //         // 类型
  //         type: "input",
  //         // 唯一标识
  //         key: "mer_name",
  //         // 表单属性
  //         formAttrs: {
  //           label: "商户名称",
  //         },
  //         // 控制属性
  //         controlAttrs: {
  //           // 提示文本
  //           placeholder: "请输入商户名称",
  //           // 是否可清空
  //           clearable: true,
  //           value: dialog.singleData.mer_name,
  //         },
  //         // 控制事件
  //         controlOn: {},
  //       },
  //       {
  //         // 类型
  //         type: "input",
  //         // 唯一标识
  //         key: "nick_name",
  //         // 表单属性
  //         formAttrs: {
  //           label: "昵称",
  //         },
  //         // 控制属性
  //         controlAttrs: {
  //           // 提示文本
  //           placeholder: "请输入昵称",
  //           // 是否可清空
  //           clearable: true,
  //           value: dialog.singleData.nick_name,
  //         },
  //         // 控制事件
  //         controlOn: {},
  //       },
  //       {
  //         // 类型
  //         type: "input",
  //         // 唯一标识
  //         key: "password",
  //         // 表单属性
  //         formAttrs: {
  //           label: "登录密码",
  //         },
  //         // 控制属性
  //         controlAttrs: {
  //           // 提示文本
  //           placeholder: "请输入登录密码",
  //           // 是否可清空
  //           clearable: true,
  //           value: dialog.singleData.password,
  //         },
  //         // 控制事件
  //         controlOn: {},
  //       },
  //       {
  //         // 类型
  //         type: "input",
  //         // 唯一标识
  //         key: "confirm_password",
  //         // 表单属性
  //         formAttrs: {
  //           label: "确认密码",
  //         },
  //         // 控制属性
  //         controlAttrs: {
  //           // 提示文本
  //           placeholder: "请输入确认密码",
  //           // 是否可清空
  //           clearable: true,
  //           value: dialog.singleData.confirm_password,
  //         },
  //         // 控制事件
  //         controlOn: {},
  //       },
  //       {
  //         // 类型
  //         type: "input",
  //         // 唯一标识
  //         key: "safety_code",
  //         // 表单属性
  //         formAttrs: {
  //           label: "安全码",
  //         },
  //         // 控制属性
  //         controlAttrs: {
  //           // 提示文本
  //           placeholder: "请输入安全码",
  //           // 是否可清空
  //           clearable: true,
  //           value: dialog.singleData.safety_code,
  //         },
  //         // 控制事件
  //         controlOn: {},
  //       },
  //       {
  //         // 类型
  //         type: "switch",
  //         // 唯一标识
  //         key: "allow_df",
  //         // 表单属性
  //         formAttrs: {
  //           label: "是否允许代付",
  //         },
  //         // 控制属性
  //         controlAttrs: {
  //           // 提示文本
  //           placeholder: "请输入是否允许代付",
  //           // 是否可清空
  //           clearable: true,
  //           value: switchFieldObj["allow_df"],
  //         },
  //         // 控制事件
  //         controlOn: {},
  //       },
  //       {
  //         // 类型
  //         type: "input",
  //         // 唯一标识
  //         key: "withdrawal_fee",
  //         // 表单属性
  //         formAttrs: {
  //           label: "提现手续费",
  //         },
  //         // 控制属性
  //         controlAttrs: {
  //           // 提示文本
  //           placeholder: "请输入提现手续费",
  //           // 是否可清空
  //           clearable: true,
  //           value: dialog.singleData.withdrawal_fee,
  //         },
  //         // 控制事件
  //         controlOn: {},
  //       },
  //       {
  //         // 类型
  //         type: "switch",
  //         // 唯一标识
  //         key: "status",
  //         // 表单属性
  //         formAttrs: {
  //           label: "状态",
  //         },
  //         // 控制属性
  //         controlAttrs: {
  //           // 提示文本
  //           placeholder: "请输入状态",
  //           // 是否可清空
  //           clearable: true,
  //           value: switchFieldObj["status"],
  //         },
  //         // 控制事件
  //         controlOn: {},
  //       },
  //       {
  //         // 类型
  //         type: "switch",
  //         // 唯一标识
  //         key: "is_check",
  //         // 表单属性
  //         formAttrs: {
  //           label: "是否审核提现账户",
  //         },
  //         // 控制属性
  //         controlAttrs: {
  //           // 提示文本
  //           placeholder: "请输入是否审核提现账户",
  //           // 是否可清空
  //           clearable: true,
  //           value: switchFieldObj["is_check"],
  //         },
  //         // 控制事件
  //         controlOn: {},
  //       },
  //       {
  //         // 类型
  //         type: "input-number",
  //         // 唯一标识
  //         key: "min_amount",
  //         // 表单属性
  //         formAttrs: {
  //           label: "最小金额",
  //         },
  //         // 控制属性
  //         controlAttrs: {
  //           // 提示文本
  //           placeholder: "请输入最小金额",
  //           // 是否可清空
  //           clearable: true,
  //           value: dialog.singleData.min_amount,
  //           style: {
  //             width: "100%",
  //           },
  //         },
  //         // 控制事件
  //         controlOn: {},
  //       },
  //       {
  //         // 类型
  //         type: "input-number",
  //         // 唯一标识
  //         key: "max_amount",
  //         // 表单属性
  //         formAttrs: {
  //           label: "最大金额",
  //         },
  //         // 控制属性
  //         controlAttrs: {
  //           // 提示文本
  //           placeholder: "请输入最大金额",
  //           // 是否可清空
  //           clearable: true,
  //           value: dialog.singleData.max_amount,
  //           style: {
  //             width: "100%",
  //           },
  //         },
  //         // 控制事件
  //         controlOn: {},
  //       },
  //       {
  //         // 类型
  //         type: "switch",
  //         // 唯一标识
  //         key: "hide_withdrawa",
  //         // 表单属性
  //         formAttrs: {
  //           label: "是否隐藏提现",
  //         },
  //         // 控制属性
  //         controlAttrs: {
  //           // 提示文本
  //           placeholder: "请输入是否隐藏提现",
  //           // 是否可清空
  //           clearable: true,
  //           value: switchFieldObj["hide_withdrawa"],
  //         },
  //         // 控制事件
  //         controlOn: {},
  //       },
  //       {
  //         // 类型
  //         type: "input",
  //         // 唯一标识
  //         key: "login_whitelist",
  //         // 表单属性
  //         formAttrs: {
  //           label: "登录IP白名单（以逗号分隔）",
  //         },
  //         // 控制属性
  //         controlAttrs: {
  //           // 提示文本
  //           placeholder: "请输入登录IP白名单（以逗号分隔）",
  //           // 是否可清空
  //           clearable: true,
  //           value: dialog.singleData.login_whitelist,
  //         },
  //         // 控制事件
  //         controlOn: {},
  //       },
  //       {
  //         // 类型
  //         type: "input",
  //         // 唯一标识
  //         key: "df_whitelist",
  //         // 表单属性
  //         formAttrs: {
  //           label: "代付IP白名单（以逗号分隔）",
  //         },
  //         // 控制属性
  //         controlAttrs: {
  //           // 提示文本
  //           placeholder: "请输入代付IP白名单（以逗号分隔）",
  //           // 是否可清空
  //           clearable: true,
  //           value: dialog.singleData.df_whitelist,
  //         },
  //         // 控制事件
  //         controlOn: {},
  //       },
  //       {
  //         // 类型
  //         type: "switch",
  //         // 唯一标识
  //         key: "audit_withdrawal_user",
  //         // 表单属性
  //         formAttrs: {
  //           label: "是否审核提现账户",
  //         },
  //         // 控制属性
  //         controlAttrs: {
  //           // 提示文本
  //           placeholder: "请输入是否审核提现账户",
  //           // 是否可清空
  //           clearable: true,
  //           value: switchFieldObj["audit_withdrawal_user"],
  //         },
  //         // 控制事件
  //         controlOn: {},
  //       },
  //       {
  //         // 类型
  //         type: "switch",
  //         // 唯一标识
  //         key: "allow_fore_launch_df",
  //         // 表单属性
  //         formAttrs: {
  //           label: "是否允许前台发起代付",
  //         },
  //         // 控制属性
  //         controlAttrs: {
  //           // 提示文本
  //           placeholder: "请输入是否允许前台发起代付",
  //           // 是否可清空
  //           clearable: true,
  //           value: switchFieldObj["allow_fore_launch_df"],
  //         },
  //         // 控制事件
  //         controlOn: {},
  //       },
  //       {
  //         // 类型
  //         type: "switch",
  //         // 唯一标识
  //         key: "google_check",
  //         // 表单属性
  //         formAttrs: {
  //           label: "是否需要google验证",
  //         },
  //         // 控制属性
  //         controlAttrs: {
  //           // 提示文本
  //           placeholder: "请输入是否需要google验证",
  //           // 是否可清空
  //           clearable: true,
  //           value: switchFieldObj["google_check"],
  //         },
  //         // 控制事件
  //         controlOn: {},
  //       },
  //       {
  //         // 类型
  //         type: "input",
  //         // 唯一标识
  //         key: "google_keygoogle",
  //         // 表单属性
  //         formAttrs: {
  //           label: "密钥",
  //         },
  //         // 控制属性
  //         controlAttrs: {
  //           // 提示文本
  //           placeholder: "请输入密钥",
  //           // 是否可清空
  //           clearable: true,
  //           value: dialog.singleData.google_keygoogle,
  //         },
  //         // 控制事件
  //         controlOn: {},
  //       },
  //       {
  //         // 类型
  //         type: "switch",
  //         // 唯一标识
  //         key: "support_back",
  //         // 表单属性
  //         formAttrs: {
  //           label: "是否支持回调",
  //         },
  //         // 控制属性
  //         controlAttrs: {
  //           // 提示文本
  //           placeholder: "请输入是否支持回调",
  //           // 是否可清空
  //           clearable: true,
  //           value: switchFieldObj["support_back"],
  //         },
  //         // 控制事件
  //         controlOn: {},
  //       },
  //       {
  //         // 类型
  //         type: "input-number",
  //         // 唯一标识
  //         key: "df_rate",
  //         // 表单属性
  //         formAttrs: {
  //           label: "代付费率",
  //         },
  //         // 控制属性
  //         controlAttrs: {
  //           // 提示文本
  //           placeholder: "请输入代付费率",
  //           // 是否可清空
  //           clearable: true,
  //           value: dialog.singleData.df_rate,
  //           style: {
  //             width: "100%",
  //           },
  //         },
  //         // 控制事件
  //         controlOn: {},
  //       },
  //     ]
  //   );

  //   list({
  //     page: 1,
  //     limit: 999999,
  //   }).then((res) => {});
  // } else if (title === "del") {
  //   // 删除
  //   ElMessageBox.confirm("确定要删除吗？", "删除", {
  //     confirmButtonText: "确定",
  //     cancelButtonText: "取消",
  //     type: "warning",
  //   }).then(() => {
  //     let params = {
  //       ids: [dialog.singleData].map((item) => item.id).join(","),
  //     };

  //     del(params).then((res) => {
  //       if (tableDatasObj.value.list.length === 1) {
  //         if (tableDatasObj.value.paging.page > 1) {
  //           --tableDatasObj.value.paging.page;
  //         }
  //       }

  //       handleQuery();
  //     });
  //   });
  // } else if (title === "clearing-rate") {
  //   dialog.visible = false;

  //   ElMessageBox.confirm("确定要将所有码商费率清0吗？", "将所有码商费率清0", {
  //     confirmButtonText: "确定",
  //     cancelButtonText: "取消",
  //     type: "warning",
  //   }).then(() => {
  //     // 访问接口；刷新列表
  //   });
  // }
}

// 弹窗对象
// const dialog = reactive({
//   visible: false,
//   type: "user-form",
//   width: 800,
//   title: "",
//   leftBtnText: "确 定",
//   rightBtnText: "取 消",
// });
// const dialogBak = { ...dialog };
// const dialogForPayOnOff = reactive({
//   visible: false,
//   type: "user-form",
//   width: 1200,
//   title: "",
//   // leftBtnText: "确 定",
//   rightBtnText: "取 消",
//   singleData: {},
//   closeDialog() {
//     dialogForPayOnOff.visible = false;
//   },
//   handleLeftClick() {},
//   handleRightClick() {
//     dialogForPayOnOff.closeDialog();
//   },
// });

// let formDialogId = ref<FormInstance>();

/**
 * 关闭弹窗
 *
 * @param type 弹窗类型  用户表单：user-form | 用户导入：user-import
 */
// function closeDialog() {
//   dialog.visible = false;
// }
// function closedDialog() {
//   formDialogId.value?.resetFields();
//   formDialogId.value?.clearValidate();
//   initDialogForm.value.initKeys.splice(0);
//   Object.keys(dialogBak).map((key) => {
//     dialog[key] = dialogBak[key];
//   });

//   initDialogForm.value = cloneDeep(initDialogFormBak);
// }

// let formDialogModel = ref({});
// function handleLeftClick() {
//   if (dialog.type === "add") {
//     formDialogId.value.validate((valid, fields) => {
//       if (valid) {
//         let params = { ...formDialogModel.value };

//         // params.pass_show = params.pass_show ? 1 : 2;
//         // params.order_float_amount = params.order_float_amount ? 1 : 2;
//         // params.pay_page_sub_name = params.pay_page_sub_name ? 1 : 2;
//         // params.int_skm_amount = params.int_skm_amount ? 1 : 2;
//         // params.skm_amount_range = params.skm_amount_range ? 1 : 2;
//         // params.handle_order_status = params.handle_order_status ? 1 : 2;
//         // params.status = params.status ? 1 : 2;

//         add(params).then((res) => {
//           ElMessage.success("添加商户成功");
//           closeDialog();
//           handleQuery();
//         });
//       }
//     });
//   } else if (dialog.type === "agency-rate") {
//     formDialogId.value.validate((valid, fields) => {
//       if (valid) {
//         // let params = { ...dialog.singleData, ...formDialogModel.value };
//         let params = { ...formDialogModel.value, id: dialog.singleData.id };

//         edit(params).then((res) => {
//           ElMessage.success("代付费率修改成功");
//           closeDialog();
//           handleQuery();
//         });
//       }
//     });
//   } else if (dialog.type === "edit") {
//     formDialogId.value.validate((valid, fields) => {
//       if (valid) {
//         let params = { ...formDialogModel.value, id: dialog.singleData.id };

//         switchFieldArr.map((field) => {
//           params[field] = switchFieldHandle.getField(params[field]);
//         });

//         edit(params).then((res) => {
//           ElMessage.success("修改用户资料成功");
//           closeDialog();
//           handleQuery();
//         });
//       }
//     });
//   }
// }

// function handleRightClick() {
//   // formDialogId.
//   closeDialog();
// }

function handleRateChange(val, obj, index, keyName) {
  // tableDatasObj.value.list[index][keyName] = val;
  // tableDatasObj.value.list[index].confirmEdit = true;
}
function handleStatusChange(val, obj, index) {
  tableDatasObj.value.list[index].status = val ? 1 : 2;
  tableDatasObj.value.list[index].confirmEdit = true;
}

const allRate = ref(0);

function handleSetAllRate() {
  ElMessageBox.confirm("", "请输入费率", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    customClass: "el-message-box__customer",
    message: () =>
      h(ElInputNumber, {
        precision: 2,
        step: 0.1,
        min: 0,
        max: 100,
        style: {
          width: "100%",
        },
        modelValue: allRate.value,
        "onUpdate:modelValue": (val: boolean | string | number) => {
          allRate.value = val;
        },
      }),
  }).then(({ value }) => {
    edit({
      ids: tableDatasObj.value.list.map((item) => item.id).join(","),
      rate: allRate.value,
    }).then(() => {
      ElMessage.success("修改成功");
      allRate.value = 0;

      handleQuery();

      // tableDatasObj.value.list[tableDatasObj.value.list.findIndex((item) => item.id === row.id)].confirmEdit = false;
    });
  });
  // ElMessageBox.prompt("请输入代付费率", "提示", {
  //   confirmButtonText: "确定",
  //   cancelButtonText: "取消",
  // }).then(({ value }) => {
  //   edit({
  //     ids: tableDatasObj.value.list.map((item) => item.id).join(","),
  //     rate: value,
  //   }).then(() => {
  //     ElMessage.success("修改成功");

  //     handleQuery();

  //     // tableDatasObj.value.list[tableDatasObj.value.list.findIndex((item) => item.id === row.id)].confirmEdit = false;
  //   });
  // });
}

function handleSetCheckedRate() {
  let tArr = [];

  if ((props.datas || []).length) {
    selectTableRows.value.map((item) => {
      props.datas.map((tItem) => {
        tArr.push({
          ms_id: tItem.id,
          pro_id: item.id,
          rate: item.rate,
        });
      });
    });

    let params = {
      paramArr: tArr,
    };

    ms_pro_modify(params).then((res) => {
      ElMessage.success("修改成功");

      selectTableRows.value = [];
      tableDatasObj.value.list = [];
      nextTick(() => {
        handleQuery();
      });
    });
  } else {
    selectTableRows.value.map((item) => {
      tArr.push({
        pro_id: item.id,
        rate: item.rate,
      });
    });

    /// *************保存预设************** ///
    let params = {
      param: tArr,
    };
    presetsRate(params).then((res) => {
      ElMessage.success("修改预设成功");

      selectTableRows.value = [];
      tableDatasObj.value.list = [];
      nextTick(() => {
        handleQuery();
      });
    });
  }
}

function handleLastSetRate() {
  getLastPayProductRate().then((res) => {
    res.list.map((item) => {
      const index = tableDatasObj.value.list.findIndex(
        (item2) => item2.id === item.pro_id
      );
      tableDatasObj.value.list[index].rate = item.rate;
    });
  });
}

onMounted(() => {
  tableDatasObj.value.queryParams = { ...searchForm.value };

  handleQuery(tableDatasObj.value.paging);
});
</script>

<style lang="scss" scoped>
.info-container {
  font-size: var(--el-font-size-extra-small);

  span {
    background-color: #1e9fff;
    display: inline-block;
    padding: 0 10px;
    margin: 0 5px;
    color: #fff;
  }
}
</style>

<style lang="scss">
.el-message-box__customer {
  .el-message-box__container {
    display: block;
  }
}
</style>
